<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>赛亚星的星球</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        body{
            height: 100%;
            min-height: 750px;
            background: url(../images/bg-base-1.jpg) repeat;
        }
        #content {
            width: 80%;
            height: 100%;
            margin: 100px auto 0;
            padding-bottom: 50px;
            background: #fff;
            box-shadow: 0 0 5px rgba(0,0,0,0.20);
            position: relative;
            z-index: 10;
            border-top: 5px solid #ea7716;
        }
        html section button{
            font-size: 20px;
            padding: 12px 12px;
        }
        @media (max-width:620px){
            #content {
                width: 90%;
                height: 100%;
                margin: 50px auto 0;
                padding-bottom: 50px;
            }
            .articles{
                margin: 5px;
            }
        }
        .myhome img{
            width: 37px;
            border-radius: 37px;
            margin: 7px 10px 0 10px;
        }
        .location{
            height: 150px;
            background-image: url(../images/menu-bg-1.jpg);
        }
        .home-information-box{
            margin: 0 auto;
            padding-bottom: 35px;
            position: relative;
        }
        .information-headimg-box{
            width: 150px;
            height: 150px;
            border: 4px solid #ffffff;
            background-color:#fff;
            position: absolute;
            left: 50%;
            margin-left: -75px;
            top: 75px;
            overflow:hidden;
            border-radius: 90px;
        }
        .information-content-wrap{
            padding-top: 100px;
        }
        .people-nick-name{
            font-size: 24px;
            color: #444;
        }
        .user-background{
            font-size: 12px;
            color: #666;
        }
        .hobby ul li {
            display: block;
            float: left;
            padding: 0 10px;
            line-height: 25px;
            background: #4f4f4f;
            margin: 0 5px 10px 0;
            font-size: 12px;
            border-radius: 3px;
        }
        .hobby a{
            color: #fff;
        }
    </style>
</head>
<body>
<!-- 头部导航 -->
<header>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="../index.html" class="navbar-logo">
                    <!--<img src="images/github-button.png" class="w70 h70 mt5" alt="">-->
                    <span class="f18 pr c-fff">yext blog</span>
                </a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown"><a href="../templates/personal.html" class="f14"><i class="glyphicon glyphicon-sunglasses mr5"></i>关于我</a></li>
                    <li class="dropdown"><a href="" class="f14"><i class="glyphicon glyphicon-road mr5"></i>生活</a></li>
                    <li class="dropdown"><a href="" class="f14"><img src="../images/dota_on.png" alt="" class="b">dota2</a></li>
                    <li class="dropdown"><a href="../templates/article_list.html" class="f14"><i class="glyphicon glyphicon-send mr5"></i>文章</a></li>
                    <li><div class="myhome"><a href="javascript:;"><img src="../images/medium.jpg" alt=""></a></div></li>
                </ul>
            </div>
        </div>
    </nav>
</header>
<section>
    <div class="container-fluid" id="content" style="min-height: 325px;">
        <div class="title_index">
            <span></span>
            <h3>
                <a href="javaScript:;">Hmoe / AboutMe</a>
            </h3>
        </div>
        <div class="home-information-box location">
            <div class="information-headimg-box">
                <img src="../images/me.jpg" alt="" style="width: 150px;height: 150px;">
            </div>
        </div>
        <div class="information-content-wrap text-center">
            <p class="people-nick-name">
                叶锡添
            </p>
            <p class="people-nick-name">
                Ye xitian
            </p>
            <p class="user-background">
                广州 | web前端
            </p>
        </div>
        <div class="container-fluid text-center">
            <div class="row">
                <div class="col-xs-6 col-sm-6 col-md-10">
                    <h3>基本信息</h3>
                    <p>Basic information</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-xs-4 text-right c-666 f16">年龄</div>
                <div class="col-md-6 col-xs-6 text-left c-666 f16">24岁</div>
            </div>
            <div class="row mt10">
                <div class="col-md-6 col-xs-4 text-right c-666 f16">学历</div>
                <div class="col-md-6 col-xs-6 text-left c-666 f16">本科</div>
            </div>
            <div class="row mt10">
                <div class="col-md-6 col-xs-4 text-right c-666 f16">毕业</div>
                <div class="col-md-6 col-xs-6 text-left c-666 f16">2016/6</div>
            </div>
            <div class="row mt10">
                <div class="col-md-6 col-xs-4 text-right c-666 f16">家乡</div>
                <div class="col-md-6 col-xs-6 text-left c-666 f16">江门蓬江区</div>
            </div>
            <div class="row mt10">
                <div class="col-md-6 col-xs-4 text-right c-666 f16">现居</div>
                <div class="col-md-6 col-xs-6 text-left c-666 f16">广州白云</div>
            </div>
            <div class="row mt10">
                <div class="col-md-6 col-xs-4 text-right c-666 f16">职业</div>
                <div class="col-md-6 col-xs-6 text-left c-666 f16">IT | web前端</div>
            </div>
            <div class="row mt10">
                <div class="col-md-6 col-xs-4 text-right c-666 f16">邮箱</div>
                <div class="col-md-6 col-xs-6 text-left c-666 f16">13611425187@163.com</div>
            </div>
            <div class="row">
                <div class="col-xs-6 col-sm-6 col-md-10">
                    <h3>业余爱好</h3>
                    <p>My hobbies</p>
                </div>
            </div>
            <div class="row hobby">
                <div class="col-md-6 col-md-offset-5 col-xs-offset-1 c-666 f16">
                    <ul>
                        <li><a href="javaScript:;">酷爱篮球</a></li>
                        <li><a href="javaScript:;">dota2</a></li>
                        <li><a href="javaScript:;">游泳</a></li>
                        <li><a href="javaScript:;">听音乐</a></li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6 col-sm-6 col-md-10">
                    <h3>项目经验</h3>
                    <p>Project experience</p>
                </div>
            </div>
            <div class="row mt10">
                <div class="col-md-6 col-xs-8 text-right c-666 f16">暂不开放</div>
            </div>
        </div>
    </div>
</section>
<footer>
    <div id="bottom">
        <div class="row">
            <div class="col-md-2 col-md-offset-1 col-xs-11">
                <h3 class="link_h3">Link</h3>
                <ul>
                    <li><a href="javaScript:;">大事记</a></li>
                    <li><a href="javaScript:;">我的网址link</a></li>
                    <li><a href="javaScript:;">dota2动态</a></li>
                    <li><a href="javaScript:;">大事记</a></li>
                    <li><a href="javaScript:;">开源中国</a></li>
                    <li><a href="javaScript:;">斗鱼</a></li>
                </ul>
            </div>
            <div class="col-md-3 col-md-offset-1 col-xs-11">
                <h3 class="link_h3">Copy</h3>
                <p class="ml20">本站部分文章、资源来自互联网，版权归原作者及网站所有，如果侵犯了您的权利，请及时致信告知我站.</p>
            </div>
            <div class="col-md-3 col-md-offset-1 col-xs-11">
                <h3 class="link_h3">About</h3>
                <p class="ml20"><a href="javaScript:;">给我留言</a></p>
                <p class="ml20"><a href="javaScript:;">我的微信</a></p>
                <p class="ml20"><img style="width: 150px;height: 150px;" src="../images/weixin.png" alt=""></p>
            </div>
        </div>
    </div>
</footer>
<script src="../js/jquery-2.1.0.min.js"></script>
<script src="../js/bootstrap.js"></script>
</body>
<script>
    $(function(){

    });
</script>
</html>